import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    ScrollView,
    Switch,
    DeviceEventEmitter,
} from 'react-native';
import Header from "../../../components/header";
import {conditionsWithType} from '../../../utils/Conditions'

let navigation

export default class RadioBoxPage extends Component {

    constructor(props) {
        super(props);
        let title = this.props.route && this.props.route.params && this.props.route.params.title ? this.props.route.params.title : ''
        let radioType = this.props.route && this.props.route.params && this.props.route.params.radioType ? this.props.route.params.radioType : ''
        let selectedEnum = this.props.route && this.props.route.params && this.props.route.params.selectedEnum ? this.props.route.params.selectedEnum : ''
        this.state = {
            title: title,
            dataSource: conditionsWithType(radioType),
            selectedEnum: selectedEnum,
            radioType: radioType,
        }
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={this.state.title} ></Header>
                <ScrollView style={{ backgroundColor: '#fff', paddingHorizontal: 15 }}>
                    {
                        this.state.dataSource.map((item, index) => {
                            return (
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.itemBox}
                                    onPress={() => {
                                        this.setState({
                                            selectedEnum: item.enmuType
                                        }, function () {
                                            if (this.props.route.params.completion) {
                                                this.props.route.params.completion(this.state.selectedEnum, item.description)
                                            }
                                            navigation.goBack()
                                        })
                                    }}
                                >
                                    <Text style={[styles.desText, { color: this.state.selectedEnum == item.enmuType ? '#333' : '#999' }]}>{item.description}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </ScrollView>
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    itemBox: {
        width: '100%',
        height: 45,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3
    },
    desText: {
        color: '#333',
        fontSize: 14
    },
})